<template>
	<div class="car-add"  v-loading="loading" >
		<el-form :inline="false" :model="store.params" :rules="rules" label-width="120px" class="clearfix" ref="ruleForm" id="editCarForm" @submit.native.prevent="save">
			 <div class="car-info-panel clearfix" style="padding-top:0px;">
        <div class="car-info-title">基本信息</div>
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="所属市场："  prop="marketId" required>
            <el-select v-model="store.params.marketId" placeholder="请选择市场" style="width:100%;" filterable>
              <el-option v-for="(item,index) in $store.state.common.marketOptions" :key="item.marketId" :value="item.marketId" :label="item.marketName" ></el-option>
            </el-select>
            <input type="hidden" name="marketId" v-model="store.params.marketId">
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="所属车商：" prop="shopId" required>
            <el-select v-model="store.params.shopId" placeholder="请选择店铺"  style="width:100%;" filterable>
              <el-option v-for="(item,index) in store.shopOptions" :key="item.shopId"  :label="item.shopName" :value="item.shopId"></el-option>
            </el-select>
            <input type="hidden" name="shopId" v-model="store.params.shopId">
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="车场区域：" :required="cussState == 2" prop="regionId">
            <el-select v-model="store.params.regionId" placeholder="请选择区域" clearable style="width:100%;" filterable>
              <el-option v-for="(item,index) in store.regionOptions" :key="item.regionId"  :label="item.regionName" :value="item.regionId"></el-option>
            </el-select>
            <input type="hidden" name="regionId" v-model="store.params.regionId">
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="车 架 号：" prop="carVin">
            <el-input v-model="store.params.carVin" placeholder="请输入内容" name="carVin" :disabled="editonoff"></el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="24" :lg="24" :xl="24" >
          <el-form-item label="品　　牌：" prop="modelId" required>
            <el-select clearable v-model="store.params.brandId" placeholder="请选择品牌" clearable filterable :disabled="editonoff">
              <el-option-group v-for="group in store.brandOptions" :key="group.initial" :label="group.initial" >
                <el-option v-for="item in group.brandInfo" :key="item.brandId" :label="`${group.initial} - ${item.brandName}`" :value="item.brandId">
                </el-option>
              </el-option-group>
            </el-select>
            <el-select v-model="store.params.seriesId" placeholder="请选择车系" clearable filterable :disabled="editonoff">
              <el-option v-for="(item,index) in store.seriesOptions" :key="item.seriesId"  :label="item.seriesName" :value="item.seriesId"></el-option>
            </el-select>
            <el-select v-model="store.params.modelId" placeholder="请选择车型" clearable filterable :disabled="editonoff">
              <el-option v-for="(item,index) in store.modeOptions" :key="item.modelId"  :label="item.modelName" :value="item.modelId"></el-option>
            </el-select>
            <input type="hidden" name="brandId" v-model="store.params.brandId">
            <input type="hidden" name="seriesId" v-model="store.params.seriesId">
            <input type="hidden" name="modelId" v-model="store.params.modelId">
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="24" :lg="24" :xl="24" >
          <el-form-item label="宣传标题：" prop="carTitle">
            <el-input v-model="store.params.carTitle" placeholder="请输入内容" :value="carInfo.brandName" name="carTitle"></el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="表显里程：" prop="carMileage" >
            <el-input placeholder="请输入内容" v-model="store.params.carMileage" name="carMileage" :disabled="editonoff" >
                <template slot="append">万公里</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="车　　型："  prop="carTypeId" required>
            <el-select v-model="store.params.carTypeId" placeholder="请选择车身类型" clearable style="width:100%;">
              <el-option v-for="(item,index) in store.carBaseParamOptions.baseCarTypeOptions" :key="item.carTypeId"  :label="item.carTypeName" :value="item.carTypeId"></el-option>
            </el-select>
            <input type="hidden" name="carTypeId" v-model="store.params.carTypeId">
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="使用性质："  prop="purposeKey" required>
            <el-select v-model="store.params.purposeKey" placeholder="请选择使用性质" clearable style="width:100%;">
              <el-option v-for="(item,index) in store.carBaseParamOptions.baseCarPurposeOptions" :key="item.purposeKey"  :label="item.purposeValue" :value="item.purposeKey"></el-option>
            </el-select>
            <input type="hidden" name="purposeKey" v-model="store.params.purposeKey">
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="过户次数：" prop="carTransferNum">
            <el-input placeholder="请输入内容" v-model="store.params.carTransferNum" name="carTransferNum">
                <template slot="append">次</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="钥匙数量：" prop="carKeyNum" >
            <el-input placeholder="请输入内容" v-model="store.params.carKeyNum"  name="carKeyNum">
                <template slot="append">把</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="24" :lg="24" :xl="24" >
          <el-col :sm="24" :md="12" :lg="8" :xl="6" >
            <el-form-item label="排　　量："  prop="carDisplacement" required>
              <el-input v-model="store.params.carDisplacement" placeholder="请输入内容" name="carDisplacement"> 
                <template slot="append">{{store.params.carInletModel}}</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="12" :xl="12" >
            <el-form-item label="涡轮增压：">
              <el-switch
                v-model="store.params.carInletModel"
                active-value="T"
                inactive-value="L">
              </el-switch>
              <input type="hidden" name="carInletModel" :value="store.params.carInletModel">
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="变 速 箱："  prop="carGearbox" required>
            <el-select v-model="store.params.carGearbox" placeholder="请选择变速箱" clearable style="width:100%;" name="carGearbox">
              <el-option v-for="item in store.carBaseParamOptions.baseCarGearboxOptions" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="燃料类型：" prop="carFuel" required>
            <el-select v-model="store.params.carFuel" placeholder="请选择燃料类型" clearable style="width:100%;" name="carFuel">
              <el-option v-for="item in store.carBaseParamOptions.baseCarFuelOptions" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="排放标准："  prop="carEnviron" required>
            <el-select v-model="store.params.carEnviron" placeholder="请选择排放标准" clearable style="width:100%;" name="carEnviron">
              <el-option v-for="item in store.carBaseParamOptions.baseCarEnvironOptions" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="外观颜色：" prop="carOutColor" required >
            <el-select v-model="store.params.carOutColor" placeholder="请选择外观颜色" clearable style="width:100%;" name="carOutColor">
              <el-option v-for="item in store.carBaseParamOptions.baseCarOutColorOptions" :key="item.colorName" :label="item.colorName" :value="item.colorName"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="内饰颜色："  prop="carInColor" >
            <el-select v-model="store.params.carInColor" placeholder="请选择内饰颜色" clearable style="width:100%;" name="carInColor">
              <el-option v-for="item in store.carBaseParamOptions.baseCarInColorOptions" :key="item.colorName" :label="item.colorName" :value="item.colorName"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="24" :lg="24" :xl="24" >
          <el-col :sm="24" :md="12" :lg="8" :xl="6" >
            <el-form-item label="是否上牌："  :prop="store.params.carLicenceState == 1?'carLicenceDate':''" >
              <el-radio-group v-model="store.params.carLicenceState">
                  <el-radio-button :label="1" name="carLicenceState">已上牌</el-radio-button>
                  <el-radio-button :label="2" name="carLicenceState">未上牌</el-radio-button>
                  <el-radio-button :label="3" name="carLicenceState">新车</el-radio-button>
                </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6" v-if="store.params.carLicenceState == 1">
            <el-form-item label="首次上牌日期：" prop="carValidateDate">
              <el-date-picker
                  :disabled="editonoff"
                  v-model="store.params.carLicenceDate"
                  type="month"
                  format="yyyy-MM"
                  placeholder="选择首次上牌日期"
                  v-if="store.params.carLicenceState == 1"
                  name="carLicenceDate"
                  >
                </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6" v-if="store.params.carLicenceState == 1">
            <el-form-item label="年审到期：" prop="carValidateDate">
              <el-date-picker v-model="store.params.carValidateDate" type="month"
                  format="yyyy-MM" placeholder="请选择日期" style="width:100%;"  name="carValidateDate" :disabled="editonoff"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6" v-if="store.params.carLicenceState == 1">
            <el-form-item label="交强险到期日：" prop="carForceInsuranceDate">
              <el-date-picker v-model="store.params.carForceInsuranceDate" type="month"
                  format="yyyy-MM" placeholder="请选择日期" style="width:100%;"  name="carForceInsuranceDate"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6" v-if="store.params.carLicenceState == 1">
            <el-form-item label="商业险到期日：" prop="carBusinessInsuranceDate">
              <el-date-picker v-model="store.params.carBusinessInsuranceDate" type="month"
                  format="yyyy-MM" placeholder="请选择日期" style="width:100%;"  name="carBusinessInsuranceDate"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6"  v-if="store.params.carLicenceState == 1">
            <el-form-item label="4S店定期保养：">
              <el-radio-group v-model="store.params.car4sUpkeepState" name="car4sUpkeepState">
                  <el-radio-button :label="1">是</el-radio-button>
                  <el-radio-button :label="0">否</el-radio-button>
                </el-radio-group>
            </el-form-item>
          </el-col>
        </el-col>


        
        
        
      </div>
      <div class="car-info-panel">
        <div class="car-info-title">图片管理</div>
        <div class="img-box">
            <div :class="{isHover:item.imageUrl!=''}" class="el-upload el-upload--picture-card img-input-box" v-for="(item,index) in imgArr" :key="index">
              <div class="box-shade" :style='editonoff&&index==0?{"display": "none"}:""'>
                <p class="box-img-title">{{item.imageKey | filterImageName}}</p>
                <p class="icon-box icon-scale" @click.prevent="showPreview(item)"></p>
                <p class="icon-box icon-delete" @click.prevent="deletePicture(index)"></p>
              </div>
              <p>{{item.imageKey | filterImageName}}</p>
              <img :src="imgUrl + item.imageUrl + '.r_300xh_300'" class="img-img" onerror="javascript:this.src=''">
              <input type="file" :style='editonoff&&index==0?{"display": "none"}:""' name="uploadFile" accept="image/*" class="img-input" @change="dealImg(item,$event)">
            </div>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog> 
        </div>
      </div>
      <div class="car-info-panel clearfix">
        <div class="car-info-title">销售信息</div>
        <el-col :sm="24" :md="24" :lg="24" :xl="24" >
          <el-col :sm="24" :md="12" :lg="8" :xl="6" >
            <el-form-item label="是否面议">
              <el-switch
                v-model="negotiated"
                :active-value="1"
                :disabled="editonoff"
                :inactive-value="0">
              </el-switch>
              <input type="hidden" name="carExtendedWarranty" v-model="negotiated">
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12" :lg="8" :xl="6" v-if="!negotiated" >
            <el-form-item label="零售价：" prop="carRetailPrice">
              <el-input placeholder="价格面议请忽略此项" v-model="store.params.carRetailPrice" name="carRetailPrice" :disabled="editonoff">
                  <template slot="append">万元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <div v-else>
            <input type="hidden" name="carRetailPrice" value="0" >
          </div>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="包含过户费">
            <el-switch
              v-model="store.params.carTransferState"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
            <input type="hidden" name="carTransferState" v-model="store.params.carTransferState">
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="金融服务">
            <el-switch
              v-model="store.params.carFinanceService"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
            <input type="hidden" name="carFinanceService" v-model="store.params.carFinanceService">
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="延保服务">
            <el-switch
              v-model="store.params.carExtendedWarranty"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
            <input type="hidden" name="carExtendedWarranty" v-model="store.params.carExtendedWarranty">
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="一口价：">
            <el-switch
              v-model="store.params.carFixedPriceState"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
            <input type="hidden" name="carFixedPriceState" v-model="store.params.carFixedPriceState">
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="特价车：">
            <el-switch
              v-model="store.params.carBargainPriceState"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
            <input type="hidden" name="carBargainPriceState" v-model="store.params.carBargainPriceState">
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="销售员工：" prop="saleUserId" required>
            <el-select v-model="store.params.saleUserId" placeholder="请选择销售人员" style="width:100%;" >
              <el-option v-for="(item,index) in store.userOptions" :key="item.userId"  :label="item.userName+' '+item.userMobile" :value="item.userId"></el-option>
            </el-select>
            <input type="hidden" name="saleUserId" v-model="store.params.saleUserId">
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="24" :lg="24" :xl="24" >
          <el-form-item label="瑕疵描述：">
            <el-input type="textarea"  placeholder="请输入内容" v-model="store.params.carFlawDesc" name="carFlawDesc"></el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="24" :lg="24" :xl="24" >
          <el-form-item label="卖点描述：">
            <el-input type="textarea" placeholder="请输入内容" v-model="store.params.carSellingPointDesc" name="carSellingPointDesc"></el-input>
          </el-form-item>
        </el-col>
      </div>
    <!-- 被遗弃的 -->
<!--       <div class="car-info-panel clearfix">
        <div class="car-info-title">基本信息</div>
        <el-col :sm="24" :md="12" :lg="8" :xl="6" >
          <el-form-item label="车 门 数：" prop="carDoorNum">
            <el-input placeholder="请输入内容" v-model="store.params.carDoorNum" name="carDoorNum">
                <template slot="append">个</template>
            </el-input>
          </el-form-item>
        </el-col>
      </div>
      <div class="car-info-panel  clearfix">
        <div class="car-info-title">车辆描述</div>
        <el-form-item label="按揭说明：">
          <el-input type="textarea" placeholder="请输入内容" v-model="store.params.carMortgageDesc" name="carMortgageDesc"></el-input>
        </el-form-item>
      </div> -->
		</el-form>
		
	<div v-if="model">
		<div class="car-info-panel">
			<div class="car-info-title">基本参数</div>
			<el-form :inline="true"  label-width="120px" class="clearfix">
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="厂　　商：">{{ model.modelManufacturer || '--'}}</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="级　　别：">{{ model.carTypeName || '--'}}</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="发 动 机：">{{ model.modelEngineModel || '--'}}</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="变 速 箱：">{{ model.modelGearboxModality || '--'}}</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="车身结构：">{{ model.modelBodywork || '--'}}</el-form-item>
				</el-col>
			</el-form>
		</div>
		<div class="car-info-panel">
			<div class="car-info-title">车身</div>
			<el-form :inline="true"  label-width="120px" class="clearfix">
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="长　　度：">{{ model.modelLength || '--'}}mm</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="宽　　度：">{{ model.modelWidth || '--'}}mm</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="高　　度：">{{ model.modelHeight || '--'}}mm</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="轴　　距：">{{ model.modelWheelbase || '--'}}mm</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="车身结构：">{{ model.modelBody || '--'}}</el-form-item>
				</el-col>
			</el-form>
		</div>
		<div class="car-info-panel">
			<div class="car-info-title">发动机</div>
			<el-form :inline="true"  label-width="120px" class="clearfix">
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="发动机型号：">{{ model.modelEngineModel || '--'}}</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="排　　量：">{{ model.modelDisplacement || '--'}}</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="进气形式：">{{ model.modelInletModel || '--'}}</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="气缸排列形式：">{{ model.modelCylinderArray || '--'}}</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="气 缸 数：">{{ model.modelCylinderNum || '--'}}个</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="燃料形式：">{{ model.modelFuelRoz || '--'}}</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="环保标准：">{{ model.modelEnviron || '--'}}</el-form-item>
				</el-col>
			</el-form>
		</div>
		<div class="car-info-panel">
			<div class="car-info-title">变速箱</div>
			<el-form :inline="true"  label-width="120px" class="clearfix">
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="变速箱类型：">{{ model.modelGearboxModality || '--'}}</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="挡位个数：">{{ model.modelGearNum || '--'}}</el-form-item>
				</el-col>
			</el-form>
		</div>
	</div>
	<el-checkbox-group v-model="confChecked">
      <div class="car-info-panel" v-for="item in conf">
        <div class="car-info-title">{{item.confName}}</div>
        <div class="clearfix" style="padding-left:40px;">
        <el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="ite in item.childCarConf" :key="ite.confId">
          <el-checkbox :label="ite.confId" name="carConfIds" :checked="ite.selectedState" style="margin-bottom:20px;" >{{ite.confName}}</el-checkbox>
        </el-col>
        </div>
      </div>
    </el-checkbox-group>
    <div class="footer">
      <!-- <mybutton  ></mybutton> -->
      <button class="el-button sort-btn el-button--primary el-button--small" form="editCarForm">确定</button>
      <el-button size="small" @click.native="$router.back('/car')">取消</el-button>
    </div>
    <el-dialog title="请选择匹配车型" :visible.sync="modelVisible">
      <el-table :data="modelData" @cell-click="getVinModel">
        <el-table-column prop="modelName" label="车型" ></el-table-column>
      </el-table>
    </el-dialog>
	</div>
</template>

<script>
import "../../assets/css/carDetial.css";
export default {
  props: [
    'cussState'
  ],
  data() {
    return {
      modelVisible:false,
      modelData:[],
      negotiated: 0,
			editonoff: false,
      carInfo:{
        brandName:'',
        seriesName:'',
        modelName:''
      },
      imgArr: [
        { imageUrl: "", imageKey: "left_anterior", imageSeq: 1 },
        { imageUrl: "", imageKey: "vin", imageSeq: 2 },
        { imageUrl: "", imageKey: "right_rear", imageSeq: 3 },
        { imageUrl: "", imageKey: "driving_seat", imageSeq: 4 },
        { imageUrl: "", imageKey: "control_booth", imageSeq: 5 },
        { imageUrl: "", imageKey: "odograph", imageSeq: 6 },
        { imageUrl: "", imageKey: "open_trunk", imageSeq: 7 },
        { imageUrl: "", imageKey: "engine_bay", imageSeq: 8 },
        { imageUrl: "", imageKey: "gear_lever", imageSeq: 9 },
        { imageUrl: "", imageKey: "tyre", imageSeq: 10 },
        { imageUrl: "", imageKey: "insurance", imageSeq: 11 },
        { imageUrl: "", imageKey: "registration_license", imageSeq: 12 },
        { imageUrl: "", imageKey: "vehicle_license", imageSeq: 13 }
      ],
      loading: false,
      confChecked: [],
      store: {
        marketOptions: [],
        shopOptions: [],
        brandOptions: [],
        userOptions: [],
        seriesOptions: [],
        modeOptions: [],
        regionOptions: [],
        carBaseParamOptions: {},
        params: {
          marketId: this.$marketId,
          shopId: this.$shopId,
          brandId:'',
          seriesId:'',
          modelId:''
        }
      },
      rules: {
        marketId: [
          {
            required: true,
            message: "请选择所属市场",
            trigger: "blur"
          }
        ],
        shopId: [
          {
            required: true,
            message: "请选择所属车商",
            trigger: "blur"
          }
        ],
        modelId: [
          {
            required: true,
            message: "请选择品牌、车系、车型",
            trigger: "blur"
          }
        ],
        carKeyNum: [
          {
            required: false,
            pattern: /^[1-9]$/,
            message: "请填写正确的钥匙数量",
            trigger: "change"
          }
        ],
        carMileage: [
          {
            required: true,
            pattern: /^(0|[1-9][0-9]{0,2})(\.[0-9]{1,4})?$/,
            message: "请填写正确的表显里程",
            trigger: "change"
          }
        ],
        carLicenceDate: [
          {
            required: true,
            message: "请选择上牌日期",
            trigger: "blur"
          }
        ],
        carRetailPrice: [
          {
            required: true,
            pattern: /^(0|[1-9][0-9]{0,3})(\.[0-9]{1,2})?$/,
            message: "请填写正确的零售价",
            trigger: "change"
          }
        ],
        saleUserId: [
          {
            required: true,
            message: "请选择销售人员",
            trigger: "blur"
          }
        ],
        carVin: [
          {
            required: true,
            pattern: /^[0-9A-Za-z]{17}$/,
            message: "请输入正确的17位车架号",
            trigger: "change"
          }
        ],
        carTitle: [
          {
            required: true,
            message: "请填写车辆标题",
            trigger: "blur"
          }
        ],
        carTypeId: [
          {
            required: true,
            message: "请选择车型",
            trigger: "blur"
          }
        ],
        purposeKey: [
          {
            required: true,
            message: "请选择运营性质",
            trigger: "blur"
          }
        ],
        
        carTransferNum: [
          {
            required: true,
            pattern: /^[1-9]$/,
            message: "请填写正确过户次数",
            trigger: "change"
          }
        ],
        carFuel: [
          {
            required: true,
            message: "请选择燃油类型",
            trigger: "blur"
          }
        ],
        carDisplacement: [
          {
            required: true,
            pattern: /^(0|[1-9][0-9]{0,1})(\.[0-9])?$/,
            message: "请填写正确排量，例:2.0",
            trigger: "change"
          }
        ],
        carGearbox: [
          {
            required: true,
            message: "请选择变速箱类型",
            trigger: "blur"
          }
        ],
        carEnviron: [
          {
            required: true,
            message: "请选择排量标准",
            trigger: "blur"
          }
        ],
        carOutColor: [
          {
            required: true,
            message: "请选择外观颜色",
            trigger: "blur"
          }
        ],
        carInColor: [
          {
            required: false,
            message: "请选择内饰颜色",
            trigger: "blur"
          }
        ],
        carValidateDate: [
          {
            required: true,
            message: "请选择年审到期时间",
            trigger: "blur"
          }
        ],
        carFacotryDate: [
          {
            required: true,
            message: "请选择出厂日期",
            trigger: "blur"
          }
        ],
        carForceInsuranceDate: [
          {
            required: true,
            message: "请选择交强险到期时间",
            trigger: "blur"
          }
        ],
        carBusinessInsuranceDate: [
          {
            required: true,
            message: "请选择商业险到期时间",
            trigger: "blur"
          }
        ]
      },
      imgUrl: imageUrl,
      dialogImageUrl: "",
      dialogVisible: false,
      conf: [],
      model: null
    };
	},
	
  created() {
    this.$store.commit("getMarketOptions", this.store);
    this.$store.commit("getBrandsOptions", this.store);
    this.$store.commit("getBaseParamOptions", this.store);
  },
  watch: {
    "store.params.carRetailPrice" () {
      this.negotiated = this.store.params.carRetailPrice ? 0 : 1
    },
    "store.params.marketId" : {
      handler: function () {
        // this.store.params.shopId = ''
        this.store.shopOptions = [];
        this.$nextTick().then(() => {
          this.$store.commit("getShopOptions", this.store);
          this.$store.commit("getRegionOptions", this.store);
        });
      },
      immediate: true,
    },
    "store.params.brandId" : {

      handler: function () {
        console.log(1111);
        // this.store.params.shopId = ''
        this.store.seriesOptions = [];
        this.$nextTick().then(() => {
          this.$store.commit("getSeriesOptions", this.store);
        });
      },
      immediate: true,
    },
    "store.params.seriesId" : {
      handler: function (val) {
        if(val && this.cussState == 3){
          let obj = {};
          obj = this.store.seriesOptions.find((item)=>{
              return item.seriesId === val;
          });
          if (obj) {
            this.carInfo.brandName = obj.brand.brandName;
            this.carInfo.seriesName = obj.brand.seriesName;
          }
         
        }
        // this.store.params.modelId = '';
        this.store.modeOptions = [];
        this.$nextTick().then(() => {
          this.$store.commit("getModeOptions", this.store);
        });
      },
      immediate: true,
    },
    "store.params.modelId"() {
      this.$nextTick().then(() => {
        if (this.cussState == 3) {
          this.getCarConf(this.store.params.modelId);
        }
      });
    },
    "store.params.carVin"() {
      this.$nextTick().then(() => {
        if (this.cussState == 3) {
          if (this.rules.carVin[0].pattern.test(this.store.params.carVin)) {
            this.getModelInfoByVin(this.store.params.carVin);
          }
        }
      });
    },
    "store.params.shopId"() {
      this.$nextTick().then(() => {
        this.$store.commit("getUserOptions", this.store);
      });
    }
  },
  methods: {
    showPreview(item) {
      this.dialogVisible = true;
      this.dialogImageUrl = null;
      this.dialogImageUrl = this.imgUrl + item.imageUrl;
    },
    deletePicture(index) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.imgArr[index].imageUrl = "";
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    dealImg(item, e) {
      const file = e.target.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(file);
      const fromData = new FormData();
      fromData.append("uploadFile", file);
      reader.onload = evt => {
        this.$axios
          .post("/controller/upload/uploadFile", fromData, {
            "Content-Type": "multipart/form-data"
          })
          .then(res => {
            if (res.data.code === 0) {
              this.$message({
                type: "warning",
                message: "上传失败"
              });
            } else {
              this.$message({
                type: "success",
                message: "上传成功"
              });
              // e.target.parentNode.getElementsByTagName('img')[0].src =evt.target.result
              item.imageUrl = res.data.result.pathUrl;
            }
          });
      };
    },
    setImgArr(arrImg) {
      for (var i = 0; i < this.imgArr.length; i++) {
        for (var j = 0; j < arrImg.length; j++) {
          if (this.imgArr[i].imageKey === arrImg[j].imageKey) {
            this.imgArr[i].imageUrl = arrImg[j].imageUrl;
          }
        }
      }
    },
    init() {
      this.imgArr = [
        { imageUrl: "", imageKey: "left_anterior", imageSeq: 1 },
        { imageUrl: "", imageKey: "vin", imageSeq: 2 },
        { imageUrl: "", imageKey: "right_rear", imageSeq: 3 },
        { imageUrl: "", imageKey: "driving_seat", imageSeq: 4 },
        { imageUrl: "", imageKey: "control_booth", imageSeq: 5 },
        { imageUrl: "", imageKey: "odograph", imageSeq: 6 },
        { imageUrl: "", imageKey: "open_trunk", imageSeq: 7 },
        { imageUrl: "", imageKey: "engine_bay", imageSeq: 8 },
        { imageUrl: "", imageKey: "gear_lever", imageSeq: 9 },
        { imageUrl: "", imageKey: "tyre", imageSeq: 10 },
        { imageUrl: "", imageKey: "insurance", imageSeq: 11 },
        { imageUrl: "", imageKey: "registration_license", imageSeq: 12 },
        { imageUrl: "", imageKey: "vehicle_license", imageSeq: 13 }
      ];
    },
    getCarConf(modelId) {
      this.$axios
        .get(this.$api.getCarConfByModelId, { params: { modelId: modelId } })
        .then(res => {
          this.conf = res.data.result;
        });
      this.$axios
        .get(this.$api.getModelInfoById, { params: { modelId: modelId } })
        .then(res => {
          this.model = res.data.result[0];
          this.store.params.carTitle = this.model.brand.brandName + ' ' + this.model.series.seriesName + ' ' + this.model.modelName;
        });
    },
    getModelInfoByVin(vin){
      this.$axios
        .get(this.$api.getModelInfoByVin, { params: { vin: vin } })
        .then(res => {
          if(res.data.result.length == 0){
            this.$message({
              type: "warning",
              message: "为查询到匹配车型"
            });
          }else if(res.data.result.length == 1){
            this.getVinModel(res.data.result[0])
          }else{
            this.modelData = res.data.result;
            this.modelVisible = true;
          }
        });
      
    },
    getVinModel(obj){
      this.modelVisible = false;
      this.store.params.brandId = obj.brand.brandId; 
      this.store.params.seriesId = obj.series.seriesId; 
      this.store.params.modelId = obj.modelId;
      this.store.params.carGearbox = obj.modelGearboxModality; 
      this.store.params.carDisplacement = obj.modelDisplacement; 
      this.store.params.carInletModel = obj.modelInletModel; 
      this.store.params.carEnviron = obj.modelEnviron; 
      this.store.params.carFuel = obj.modelFuelRoz; 
      // this.carInfo.brandName = obj.brandName;
      // this.carInfo.seriesName = obj.seriesName;
      // this.carInfo.modelName = obj.modelName;
      // this.conf = obj.modelConf;
      // this.model = obj;
      
    },
    getCarDetial(carId) {
      this.store.params = {};
      this.$axios
        .get(this.$api.getCarById, { params: { carId: carId, imageViewId: 2 } })
        .then(res => {
					this.store.params = res.data.result;
					this.editonoff = this.store.params.carStockState > 10
          this.model = res.data.result.model;
          this.setImgArr(res.data.result.carImages);
          this.loading = false;
        });
      this.$axios
        .get(this.$api.getCarConfById, { params: { carId: carId } })
        .then(res => {
          this.conf = res.data.result;
        });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    save(form) {
      let forms = new FormData(event.target);

      this.store.params.carConfIds = this.confChecked.join(",");
      this.store.params.carImageJson = JSON.stringify(this.imgArr);

      forms.append("carConfIds", this.store.params.carConfIds);
      forms.append("carImageJson", this.store.params.carImageJson);
      forms.append("userId", this.$sess.get('userInfo').userId);

      if (this.cussState != 3) {
        forms.append("carId", this.store.params.carId);
      }
      
      var objData = {};

      forms.forEach((value, key) => (objData[key] = value));

      console.log(JSON.stringify(objData));

      // return false

      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          this.$emit('submit', forms)
        } else {
          console.log("不通过");
        }
      });
    }
   
  },
  activated() {
    this.init();
    if (this.cussState == 3) {
      this.loading = false;
    }else{
      this.loading = true;
      this.getCarDetial(this.$route.params.id);
    }
  },
  deactivated() {

  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.img-box {
  padding: 0 20px;
}
.el-col.el-col-24.el-col-sm-24.el-col-md-12.el-col-lg-8.el-col-xl-6{ height: 62.40px;}
</style>


















